<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>文章管理</title>

    <%--<link rel="shortcut icon" href="favicon.ico">--%>
    <link href="<c:url value="/resources/hplus/lib/css/bootstrap.min.css?v=3.3.6"/>" rel="stylesheet">
    <link href="<c:url value="/resources/hplus/lib/css/font-awesome.css?v=4.4.0"/>" rel="stylesheet">

    <!-- Sweet Alert -->
    <link href="<c:url value="/resources/hplus/lib/css/plugins/sweetalert/sweetalert.css"/>" rel="stylesheet">

    <!-- jqgrid-->
    <link href="<c:url value="/resources/hplus/lib/css/plugins/jqgrid/ui.jqgrid.css?0820"/>" rel="stylesheet">

    <link href="<c:url value="/resources/hplus/lib/css/animate.css"/>" rel="stylesheet">
    <link href="<c:url value="/resources/hplus/lib/css/style.css?v=4.1.0"/>" rel="stylesheet">
    <link href="<c:url value="/resources/layui/css/layui.css"/>" rel="stylesheet">

    <style>
        .ui-jqgrid tr.jqgrow td
        {
            /* jqGrid cell content wrap  */
            white-space: normal !important;
            height :auto;
        }

        th.ui-th-column div
        {
            /* jqGrid columns name wrap  */
            white-space:normal !important;
            height:auto !important;
            padding:0px;
        }
    </style>

</head>

<body class="gray-bg">
<div class="wrapper wrapper-content  animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox ">
                <div class="ibox-title">
                    <!--<h5>jQuery Grid Plugin – jqGrid</h5>-->
                    <div class="form-group" style="margin-bottom: 40px;">
                        <div class="col-sm-2">
                            <button class="btn btn-primary " type="button" id="openModal">
                                <i class="fa fa-plus-square"></i>&nbsp;增加
                            </button>
                        </div>
                        <%--<div class="col-sm-10">
                            <form role="form" class="form-inline">
                                <div class="form-group">
                                    <label for="projectName" class="sr-only">项目名称：</label>
                                    <input id="projectName" type="text" placeholder="项目名称" class="form-control">
                                </div>
                                <div class="form-group">
                                    <label for="proManager" class="sr-only">项目经理：</label>
                                    <input id="proManager" type="text" placeholder="项目经理" class="form-control">
                                </div>
                                <button id="searchButton" type="button" class="btn btn-primary">
                                    搜索
                                </button>
                            </form>
                        </div>--%>
                    </div>
                </div>

                <div class="ibox-content">
                    <!--<h4 class="m-t">高级用法</h4>-->

                    <div class="jqGrid_wrapper">
                            <table id="grid_table"></table>
                        <div id="grid_pager"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal inmodal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" style="height: auto;width: auto;">
            <form class="form-horizontal m-t" id="commentForm" action="" method="post">
                <div class="modal-content animated bounceInRight">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">关闭</span>
                        </button>
                        <h3>编辑数据</h3>
                    </div>
                    <div class="modal-body">

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" id="saveFormData">保存</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 全局js -->
<script src="<c:url value="/resources/hplus/lib/js/jquery.min.js?v=2.1.4"/>"></script>
<script src="<c:url value="/resources/hplus/lib/js/bootstrap.min.js?v=3.3.6"/>"></script>



<!-- Peity -->
<script src="<c:url value="/resources/hplus/lib/js/plugins/peity/jquery.peity.min.js"/>"></script>

<!-- jqGrid -->
<script src="<c:url value="/resources/hplus/lib/js/plugins/jqgrid/i18n/grid.locale-cn.js?0820"/>"></script>
<script src="<c:url value="/resources/hplus/lib/js/plugins/jqgrid/jquery.jqGrid.min.js?0820"/>"></script>

<script src="<c:url value="/resources/lib/jquery/plugin/jquery.form.min.js"/>"></script>

<!-- 自定义js -->
<script src="<c:url value="/resources/hplus/lib/js/content.js?v=1.0.0"/>"></script>

<!-- Sweet alert -->
<script src="<c:url value="/resources/hplus/lib/js/plugins/sweetalert/sweetalert.min.js"/>"></script>

<script src="<c:url value="/resources/hplus/lib/js/plugins/validate/jquery.validate.min.js"/>"></script>
<script src="<c:url value="/resources/hplus/lib/js/plugins/validate/messages_zh.min.js"/>"></script>

<!-- layer javascript -->
<script src="<c:url value="/resources/hplus/lib/js/plugins/layer/layer.min.js"/>"></script>

<script src="<c:url value="/resources/hplus/lib/js/plugins/layer/laydate/laydate.js"/>"></script>


<!-- Page-Level Scripts -->
<script>
    $(document).ready(function () {

        $.jgrid.defaults.styleUI = 'Bootstrap';

        var grid_table = "#grid_table";
        var grid_pager = "#grid_pager";

        $(grid_table).jqGrid({
            url:"<c:url value="/admin/article/listJson.json"/>",
            mtype: "POST",
            datatype: "json",
            height: 450,
            autowidth: true,
            shrinkToFit: true,
            rowNum: 20,
            rowList: [10, 20, 50],
            colNames: [ '操作','序号', '添加时间', '文章名称', '更新时间'],
            colModel: [
                {name:'action',index:'action',label:"操作", align:'left', editable: false,search:false, sortable:false,width:240},
                {name: 'id', index: 'id',  align:'left', editable: true, sortable:true, sorttype: "int", hidden:true,search:false,width:30},
                {name: 'createTime', index: 'createTime', align:'left', editable: true, sortable:true, hidden:true,sorttype: "date",search:false},
                {name: 'articleName', index: 'articleName', editable: true,  align:'left',sortable:false,width:350},
                {name: 'updateTime', index: 'updateTime', editable: true, align:'left',sortable:false}
            ],
            pager: grid_pager,
            viewrecords: true,
//            caption: "jqGrid 示例2",
            add: true,

            edit: true,
            addtext: 'Add',
            edittext: 'Edit',
            hidegrid: false,
            gridComplete: function() {
                var ids = $(grid_table).jqGrid('getDataIDs');

                for (var i = 0; i < ids.length; i++) {
                    var articleName = $(grid_table).jqGrid('getRowData',ids[i]).articleName;
                    $(grid_table).jqGrid('setRowData', ids[i], {
                      action :  "<button class='btn btn-xs btn-primary edit' id='editPage_" + ids[i] + "' onclick='editPage(" + ids[i] + ")'><i class='fa fa-edit'></i>"+"修改"+"</button>" +
                      "&nbsp;<button class='btn btn-xs btn-danger del' id='del_" + ids[i] + "' onclick='del(" + ids[i] + ",\"" + articleName + "\")'><i class='fa fa-times'></i>"+"删除"+"</button>"
                    });
                }
            }
        });

        // reload data table
        // jQuery(grid_table).jqGrid('setGridParam', {postData:getQueryData(), page:1}).trigger("reloadGrid");

        // Add selection
        $(grid_table).setSelection(4, true);

        // Setup buttons
        $(grid_table).jqGrid('navGrid', grid_pager, {
            edit: false,
            add: false,
            del: false,
            search: false
        }, {
            height: 200,
            reloadAfterSubmit: true
        });

        // Add responsive to jqGrid
        $(window).bind('resize', function () {
            var width = $('.jqGrid_wrapper').width();
            $(grid_table).setGridWidth(width);
        });

        var icon = "<i class='fa fa-times-circle'></i> ";
        $("#commentForm").validate({
            rules: {
                addrName: {
                    required: true
                },
                addrCode: {
                    required: true
                }
            },
            messages: {
                addrName: {
                    required: icon + "请输入地区名称"
                },
                addrCode: {
                    required: icon + "请输入地区编码"
                }
            }
        });

        $("#saveFormData").click(function () {

            $("#content").val(CKEDITOR.instances.contentCK.getData());
            var validator = $("#commentForm").validate();
            if(validator.form()) {  // 验证结果

                var _addr_sub_url = "<c:url value="/admin/article/addOredit.json"/>";
                var options = {
                    url: _addr_sub_url,
                    success: function (data) {
                        if(data.status===1){
                            swal("操作失败！",data.msg,"error");
                        }else{
                            $('#myModal').modal('hide');
                            clearInps();
                            $(grid_table).trigger("reloadGrid");
                            swal("操作成功！",data.msg,"success");
                        }
                    }
                };
                $("#commentForm").ajaxSubmit(options);
            }
        })

        $("#openModal").click(function () {

            $.post('<c:url value="/admin/article/editPage.action"/>', {}, function(data) {
                $(".modal-body").html(data);
                $("#myModal").modal();
                _addr_sub_opr = "add";
            }, 'HTML');
        });

        /**
         * 条件搜索
         * */
        $('#searchButton').click(function () {
            var projectName = $('#projectName').val();
            var proManager = $('#proManager').val();

            $('#grid_table').jqGrid('setGridParam', {
                postData: {'projectName': projectName, 'proManager': proManager}, //发送搜索条件
                page: 1
            }).trigger("reloadGrid"); //重新载入
        });
    });

    var _addr_sub_opr = "add";

    function clearInps() {
       // $('#addrName').val('');
    }

    function editPage(id) {

        $.post('<c:url value="/admin/article/editPage.action"/>', {id : id}, function(data) {
            $(".modal-body").html(data);
            $("#myModal").modal();
            _addr_sub_opr = "edit";
        }, 'HTML');
    }


    function del(id, articleName) {

//        parent.layer.confirm('确认删除？', {
//            btn: ['确定','取消'], //按钮
//            shade: true //不显示遮罩
//        }, function(){
//            parent.layer.msg('删除', {icon: 1});
//        }, function(){
//            parent.layer.msg('奇葩么么哒', {shift: 6});
//        });
        swal({
            title:"您确认删除 ["+articleName+"]？",
            text:"删除后将无法恢复，请谨慎操作！",
            type:"warning",showCancelButton:true,
            confirmButtonColor:"#DD6B55",
            confirmButtonText:"是的，我要删除！",
            cancelButtonText:"让我再考虑一下…",
            closeOnConfirm:false,
            closeOnCancel:false
        }, function (isConfirm) {
            if(isConfirm){
                $.post('<c:url value="/admin/article/delete.action"/>', {id : id}, function(data) {
                    $('#grid_table').trigger("reloadGrid");
                    swal("删除成功！","您已经永久删除了这条信息。","success")
                }, 'JSON');
            }else{
                swal("已取消","您取消了删除操作！","error")}
        });
    }
</script>

<!--<script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>-->
<!--统计代码，可删除-->

</body>

</html>